<template>
	<view class="container bg-w">
		<view class="header uni-flex uni-row flex-between">
			<uni-nav-bar title="施工资料">
				<template slot='left'>
					<view class="flex width-100 ">
						<i class='iconfont iconfanhui' @click='goBack()'></i>
					</view>
				</template>
			</uni-nav-bar>
		</view>
		<view class="position-r-top ">
			<view class="construction-data">
				<form action="" :class="{disabled:disabledBtn==true}">
					<view class="form-list flex flex-between height-40 border-bottom" v-show="auditReason">
						<text class="color-6 ">驳回原因</text>
						<text class="color-red">{{ auditReason }}</text>
					</view>
					<view class="form-list flex flex-between min-height-40 border-bottom algin-i-c">
						<text class="color-6 ">测点名称</text>
						<!-- <textarea type="text" v-model="zdhjcStandardPro.gaugingPoint" placeholder="请输入测点名称"/> -->
						<uni-easyinput type="textarea" autoHeight v-model="zdhjcStandardPro.gaugingPoint" placeholder="请输入测点名称" v-if="sort==0"></uni-easyinput>
						<text v-else>{{ zdhjcStandardPro.gaugingPoint }}</text>
					</view>
					<view class="form-list flex flex-between height-40 border-bottom">
						<text class="color-6 ">设备类型</text>
						<view class="uni-list-picker wid-60">
							<picker @change="bindPickerChange" :value="type" :range="equipmentType">
								<view class="uni-input" v-if='equipmentType[type]'>{{equipmentType[type]}}</view>
								<view class="uni-input color-grey" v-else>请选择设备类型</view>
							</picker>
						</view>
					</view>
					<view class="form-list flex flex-between height-40 border-bottom">
						<text class="color-6 ">规范模板</text>
						<input type="text" v-model="zdhjcStandardPro.detailedName" placeholder="请选择规范模板" disabled @click="SelectTemplate" />
					</view>
					<view class="" v-show="showEquipment">
						<view class="form-list flex flex-between height-40 border-bottom">
							<text class="color-6 ">设备id</text>
							<input type="text" v-model="zdhjcStandardPro.equipmentId" placeholder="请输入设备id" />
						</view>
						<!-- <view class="form-list flex flex-between height-40 border-bottom">
							<text class="color-6 ">设备名称</text>
							<input type="text" v-model="zdhjcStandardPro.equipmentName" placeholder="请输入设备名称" />
						</view> -->
					</view>
					<view class="form-list flex flex-between height-40 border-bottom">
						<text class="color-6 ">备注信息</text>
						<input type="text" v-model="zdhjcStandardPro.remarks" placeholder="请输入备注信息" />
					</view>
					<view class="form-list flex flex-between border-bottom">
						<text class="color-6 height-40">上报位置</text>
						<view class="flex">
							<input type="text" v-model="zdhjcStandardPro.postAddr" disabled />
							<view class="margin-l-10 text-a-c locationstyle" @click="LocationBtn">
								<i class='iconfont icondingwei theme-color'></i>
								<view class="theme-color fz-12 dis-block">更新定位</view>
							</view>
						</view>
					</view>
				</form>
					<view class="photograph">
						<view class="photograph-list" v-for="(item,index) in standardSteps" :key='index'>
							<view class="flex flex-between margin-b-10">
								<text>{{ item.stepName }}</text>
								<i v-show="hidebuildBtn" class='iconfont iconpaizhao fz-22 color-6' :class="{disabled:disabledBtn==true}" @tap="chooseVideoImage(item,index)"></i>
							</view>
							<text class="color-6">{{ item.standard }}</text>
							<view class="photo-list">
								<view class="image-view position-r demonstration"  @click='showImgsf(item)'>
									<view class="">示范图片</view>
									<image class="" :src="item.imgUrl" mode=""></image>
								</view>
								<block v-for="(imglist,imgIndex) in item.imageList" :key='imgIndex'>
									<view class="uni-uploader__file image-view">
										<image class="uni-uploader__img" :src="imglist.imgUrl" :data-src="imglist.imgUrl" @click='showImg(imglist)'></image>
										<button v-show="disabledBtn == false" v-if="delShow" @tap="delectImage(index,imgIndex,imglist.attachment)" class="fz-13 border-r-0 del-btn color-red height-25">删除</button>
									</view>
								</block>
								<block v-for="(videolist,videoIndex) in item.videoList" :key='videolist'>
									<view class="uni-uploader__file image-view" v-show="!nowImg.src">
										<view class="uploader_video">
											<view v-show="videoStyle" @tap="videobtn" class="video-bottom"></view>
											<view v-show="!videoStyle" class="video1">
												<video id="myVideo" :src="videolist.videoUrl" class="video" :show-center-play-btn='false' :controls='false'  :class="{'dis_none':hideVideo}" autoplay>
													<cover-view v-show="!videoStyle" @tap="videobtn" style="height: 100%;width: 100%;"></cover-view>
												</video>
											</view>
											<view v-show="videoStyle" class="video2">
												<video ref="big" id="bigVideoShow" @tap="videobtn" :style="videoWH" :src="videolist.videoUrl" class="video" :class="{'dis_none':hideVideo}"
												 :show-center-play-btn='false' :controls='true' autoplay>
												</video>
											</view>
											<button v-show="disabledBtn == false" @tap="delectVideo(index,videoIndex,videolist.attachment)" class="fz-13 border-r-0 del-btn color-red height-25">删除</button>
										</view>
									</view>
								</block>
							</view>
						</view>
					</view>
				<view class="">
					<uni-popup ref="popup" type="bottom">
						<view class="screen-popup">
							<view class="screen-popup-title flex flex-between">
								<text class="margin-l-10"> 请选择规范模板 </text>
								<view class="flex border-left">
									<text @click="close()">取消</text>
									<text @click="ChoiceTemplate()">确认</text>
								</view>
							</view>
							<view class="screen-popup-body">
								<!-- <uni-search-bar :radius="100" @confirm="searchTemplate" placeholder='请输入模板名称'></uni-search-bar> -->
								<view class="uni-list">
									<radio-group @change="radioChange">
										<view class="overflow-h">
											<label class="uni-list-cell uni-list-cell-pd flex flex-between border-bottom" v-for="(item, index) in template"
											 :key="item.id">
												<view class="fz-14">{{item.name}}</view>
												<view>
													<radio color='#09AAE9' :value="item.id" :checked="index === current" />
												</view>
											</label>
										</view>
									</radio-group>
								</view>
							</view>
						</view>
					</uni-popup>
				</view>
			</view>
			<view class="construction-footer flex" :class="{'disabled':gopay == false}" v-show="hidebuildBtn">
				<button type="text" v-show="delShow" @click="delBuildBtn">删除</button>
				<button type="text" v-show="delShow" @click="temporarySave">暂存</button>
				<button type="text" v-show="delShow" @click.stop="buildSaveBtn">提交</button>
				<!-- <button type="text" v-show="!ShowPreserve" @click.stop="updateBuildBtn">保存</button> -->
			</view>
			<uni-popup ref="delpopup" type="dialog">
				<uni-popup-dialog type="input" title="删除警告" content="是否要删除？一旦删除将无法恢复." :duration="2000" :before-close="true" @close="delclose"
				 @confirm="delconfirm"></uni-popup-dialog>
			</uni-popup>
			<uni-popup ref="imgpopup" type="center" class="popup">
				<!-- <canvas canvas-id="previewCanvas" class="preview-cancas" @click="closeImg"></canvas> -->
				<image :style="{'width':imgW,'height':imgH}" :src="imgUrl" @touchstart="start" @touchend="end" @click="closeImg"></image>
				<!-- <image mode="widthFix" :src="imgUrl" @touchstart="start" @touchend="end" @click="closeImg"></image> -->
			</uni-popup>	
		</view>
		
		<edit-img v-if="nowImg.src" :imgSrc.sync="nowImg.src" :imgPath.sync="nowImg.path"></edit-img>
	</view>
</template>

<script>
	import {
		standard,
		standardList,
		buildSave,
		updateBuild,
		delBuild,
		auditReason,
		waterManagement
	} from '@/common/api/ConstructionReport.js'
	import {
		getFileInfoAll,
		getFileInfo,
		getFilePath,
		upload,
		delFile,
		equipmentTypeAll
	} from '@/common/api/api.js'
	import ipConfig from '@/utils/ipconfig.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components: {
			uniPopup,
			uniPopupDialog,
		},
		data() {
			return {
				page: {
					pageSize: 999, //每页显示的页数
					pageNo: 1, //当前页
					processId: '',
					relatedEquipmentType: ''
				},
				total: 0, //总条数
				totalPage: 0, //总页数
				UpdateOrAdd: 0, //0新增,1修改
				sort: null,
				ShowPreserve: true,
				delShow: false,
				msgfrom: true,
				disabledBtn: false,
				template: [],
				templateId: null,
				current: -1,
				constructionId: '',	//施工点id
				standardSteps: [],
				addstandardSteps: [],
				imageList: [], //保存图片路径集合
				imageAll: [], //图片元素集合
				videoList: [], //视频路径集合
				videoAll: [], //视频元素集合
				attachmentFile: [], //合并图片和视频id
				sourceType: ['拍摄', '相册', '拍摄或相册'],
				cameraList: [{
						value: 'back',
						name: '后置摄像头',
						checked: 'true'
					},
					{
						value: 'front',
						name: '前置摄像头'
					},
				],
				isDisable: false,
				videoWH: {
					'height': '100%',
					'width': '100%',
					'position': 'fixed',
					'top': '0',
					'left': 0,
					'z-index': 9
				},
				videoStyle: false,
				showEquipment: false,
				hidebuildBtn: true,
				zdhjcStandardPro: {
					detailedName: null,
					subProjectId: null,
					standardId: null,
					detailedId: null, //子工序模板ID
					gaugingPoint: null, //测点名称
					equipmentId: null,
					equipmentName: null,
					equipmentType: null,
					latitude: 1,
					longitude: 1,
					postAddr: null,
					postDetails: [],
					remarks: ''	//备注
				},
				ProjectReportStorage: {},
				InfoListData: {},
				equipmentTypeAll: [],
				equipmentType: [],
				type: -1,
				gopay:true,
				nowImg: {	//当前编辑图片
					item: '',	//当前图片对象
					src: '',	//用于操作
					path: ''	//用于上传
				},
				previewImageAll:[],//预览图片
				clientX:0,
				clientY:0,
				imgUrl:'',
				imgIndex:0,
				hideVideo:false,
				imgH:null,
				imgW:null,
				screenWidth:null,
				screenHeight:null,
				auditReason: ''	, //驳回原因
				waterInfo: null	//水印配置
			}
		},
		onLoad(option) {
			if(option.msgfrom){
				this.msgfrom = option.msgfrom
			}else{
				this.msgfrom = "true"
			}
			this.sort = option.sort
			
			uni.getStorage({
				key: 'ProjectReportStorage',
				success: (res) => {
					this.ProjectReportStorage = res.data
					this.zdhjcStandardPro.detailedId = this.ProjectReportStorage.detailedId
					this.zdhjcStandardPro.subProjectId = this.ProjectReportStorage.subProjectId
					this.page.processId = this.ProjectReportStorage.id
					equipmentTypeAll('equipment_type').then(res_type => {
						this.equipmentTypeAll = res_type.data
						res_type.data.forEach(obj => {
							this.equipmentType.push(obj.label)
						})
					})
					if (res.data.processType == 1) {
						this.showEquipment = true
					} else {
						this.showEquipment = false
					}
				}
			})
			uni.getStorage({
				key: 'waterId',
				success: (res) => {
					waterManagement(res.data).then(res=> {
						if(res.code == 20000) this.waterInfo = res.data;
					})
				}
			})
		},
		onReady() {
			this.screenWidth = uni.getSystemInfoSync().screenWidth
			this.screenHeight = uni.getSystemInfoSync().screenHeight
			// 回显
			this.InfoListData = uni.getStorageSync('InfoListData')
			if (this.InfoListData) {
				if (this.InfoListData.status == 4 || this.InfoListData.status == 3) {
					this.hidebuildBtn = false
					this.disabledBtn = true
				}else{
					this.hidebuildBtn = true
					this.disabledBtn = false
					this.LocationBtn();
				}
				this.ShowPreserve = false
				this.msgfrom !== "false"?this.delShow = true : this.delShow = false;
				this.zdhjcStandardPro.gaugingPoint = this.InfoListData.gaugingPoint
				this.zdhjcStandardPro.postAddr = this.InfoListData.postAddr
				this.zdhjcStandardPro.detailedName = this.InfoListData.name
				this.zdhjcStandardPro.equipmentId = this.InfoListData.equipmentId
				this.zdhjcStandardPro.equipmentName = this.InfoListData.equipmentName
				if (this.InfoListData.equipmentType) {
					this.page.relatedEquipmentType = this.InfoListData.equipmentType
					this.zdhjcStandardPro.equipmentType = this.InfoListData.equipmentType
					equipmentTypeAll('equipment_type').then(res => {
						res.data.forEach(obj => {
							if (obj.id == this.InfoListData.equipmentType) {
								this.type = Number(obj.value) - 1;
							}
						})
					})
					this.templateData();
				}
				this.zdhjcStandardPro.remarks = this.InfoListData.remarks
				this.templateId = this.InfoListData.standardId
				this.constructionId = this.InfoListData.id
				this.addstandardSteps = this.InfoListData.postDetails
				if (this.addstandardSteps) {
					this.addstandardSteps.forEach(obj => {
						this.zdhjcStandardPro.postDetails.push({
							attachment: obj.attachment,
							originalAttachment: obj.original,
							fileType: obj.fileType,
							stepId: obj.stepId,
						})
					})
					this.ChoiceTemplate()
				}
			}
			this.loadAuditReason(this.InfoListData.id)
		},
		methods: {
			loadAuditReason(standardProId) {
				auditReason(standardProId).then((res)=>{
					if(res.code == 20000){
						if(res.data) this.auditReason = res.data.auditReason
					}
				})
			},
			bindPickerChange(e) {
				this.type = e.target.value
				this.equipmentTypeAll.forEach(obj => {
					if (obj.value == JSON.stringify(e.target.value + 1)) {
						this.zdhjcStandardPro.equipmentType = obj.id;
						this.page.relatedEquipmentType = obj.id
					}
				})
				this.standardSteps = [];
				this.zdhjcStandardPro.detailedName = '';
				this.zdhjcStandardPro.postDetails = [];
				this.templateData();
				console.log(this.zdhjcStandardPro);
			},
			templateData() {
				standard(this.page).then(res => {
					if (res.code == 20000) {
						if(res.data.records.length){
							this.template = res.data.records;
						}else{
							uni.showToast({
								title: '该设备暂无规范模板',
								icon: 'none'
							})
							this.template = [];
							this.standardSteps = [];
						}
					}
				})
			},
			searchTemplate(e) {
				this.page.name = e.value
				this.templateData();
			},
			LocationBtn() { 	//定位
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: (res) => {
						// console.log(this.zdhjcStandardPro);
						// console.log('当前位置的经度：' + res.longitude);
						// console.log('当前位置的纬度：' + res.latitude);
						// console.log('当前位置：' + res.address.poiName);
						this.zdhjcStandardPro.longitude = res.longitude
						this.zdhjcStandardPro.latitude = res.latitude
						this.zdhjcStandardPro.postAddr = res.address.poiName
					}
				});
			},
			SelectTemplate() { //选择模板弹框
				if(this.zdhjcStandardPro.equipmentType){
					this.$refs.popup.open()
				}else{
					uni.showToast({
						title: '请选择设备类型',
						icon: 'none'
					})
				}
			},
			close() {
				this.$refs.popup.close()
			},
			radioChange(evt) { //选择模板列表
				this.templateId = evt.detail.value
				this.template.forEach((obj, index) => {
					if (obj.id == this.templateId) {
						this.zdhjcStandardPro.detailedName = obj.name
						this.current = index;
					}
				})
			},
			ChoiceTemplate() { //选择模板确认按钮
				if (this.templateId) {
					standardList(this.templateId).then(res => {
						if (res.data) {
							this.standardSteps = res.data.standardSteps
							this.zdhjcStandardPro.standardId = this.standardSteps[0].standardId
							this.standardSteps.forEach(obj => {
								this.$set(obj, 'imageList', [])
								this.$set(obj, 'videoList', [])
								getFileInfo(obj.attachmentId).then(res => {
									let imgUrl = 'data:application/force-download;base64,' + uni.arrayBufferToBase64(res)
									this.$set(obj, 'imgUrl', imgUrl)
								})
								this.msgfrom !== "false"?this.delShow = true : this.delShow = false;
								if (this.addstandardSteps&&this.addstandardSteps.length != 0) { //回显数据
									this.addstandardSteps.forEach(obj2 => {
										if (obj2.stepId == obj.stepId) {//模板列表判断
											if (obj2.fileType == 0) {
												getFileInfo(obj2.attachment).then(res2 => {
													let imgUrl2 = 'data:application/force-download;base64,' + uni.arrayBufferToBase64(res2)
													obj.imageList.push({
														imgUrl:imgUrl2,
														attachment:obj2.attachment,
														stepId: obj2.stepId,
													})
												})
											} else {
												// let videoUrl = window.URL.createObjectURL(new Blob([res2])) //将数据流转blob预览
												getFilePath(obj2.attachment).then(res2 => {
													obj.videoList.push({
														// videoUrl: `${ipConfig.ip}admin/sys-file/getFileById?id=${obj2.attachment}`,
														videoUrl: res2.data,
														attachment:obj2.attachment,
														stepId: obj2.stepId,
													})
												})
											}
											
										}
									})
								}
							})
							this.$refs.popup.close()
						}
					})
				} else {
					uni.showToast({
						title: '请选择规范模板',
						icon: 'none'
					})
				}
			},
			chooseVideoImage(item, index) { //判断选择视频还是图片
				uni.showActionSheet({
					title: "选择上传类型",
					itemList: ['图片', '视频'],
					success: (res) => {
						if (res.tapIndex == 0) {
							this.chooseImages(item, index)
						} else {
							this.chooseVideo(item, index)
							this.videoStyle = false
						}
					}
				})
			},
			chooseImages(item, imgIndex) { // 上传图片
				this.videoStyle = false
				uni.chooseImage({
					count: 1, //默认9
					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sizeType: ['original'],
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						this.isDisable = false
						let imgSize = 1024 * 1024 * 50
						let time = 10 * 60 * 1000 // 10分钟转换时间戳
						if (res.tempFiles[0].path.includes('mp4') == true) {
							uni.showToast({
								title: '不能上传视频，请重新上传',
								icon: 'none'
							})
						} 
						// else if (new Date() - new Date(res.tempFiles[0].lastModifiedDate) > time) {
						// 	uni.showToast({
						// 		title: '上传的图片时间不能超过10分钟',
						// 		icon: 'none',
						// 		duration: 3000
						// 	})
						// } 
						else {
							this.nowImg.src = res.tempFilePaths[0];
							this.nowImg.item = item;
							// item.imageList = item.imageList.concat(res.tempFilePaths);
							// this.attachmentFile.push({
							// 	path:'app',
							// 	fileType:0,
							// 	stepId:item.stepId,
							// 	filePath:res.tempFilePaths[0],
							// 	gaugingPoint: this.zdhjcStandardPro.gaugingPoint,
							// 	latitude: this.zdhjcStandardPro.latitude, 
							// 	longitude: this.zdhjcStandardPro.longitude, 
							// })
						}
					},
				});
			},
			chooseVideo(item, videoIndex) { // 上传视频
				uni.chooseVideo({
					maxDuration: 60, //拍摄视频最长60秒
					// count: 10,
					// camera: 'front',
					sourceType: ['album', 'camera'],
					success: (video) => {
						this.isDisable = false
						let videoSize = 1024 * 1024 * 500
						// if(video.tempFilePath.includes('mp4') == false){
						// 	uni.showToast({
						// 		title: '视频格式只能是mp4',
						// 		icon: 'none'
						// 	})
						// }else {
						uni.showLoading({
							title: '视频上传中…'
						})
						let content = '';
						let obj = {
							path: 'app',
							fileType: 1,
							stepId: item.stepId,
							position: this.waterInfo.position,
							timeFlag: this.waterInfo.timeFlag == 1 ? true : false,
						}
						if(this.waterInfo.pointFlag == 1) content += `测点：${this.zdhjcStandardPro.gaugingPoint}|`
						if(this.waterInfo.addressFlag == 1) content += `地址：${this.zdhjcStandardPro.postAddr}|`
						if(this.waterInfo.laloFlag == 1) content += `经纬度：${this.zdhjcStandardPro.longitude}, ${this.zdhjcStandardPro.latitude}|`
						obj.content = content.substr(0, content.length-1);
						
						uni.uploadFile({
							url: ipConfig.ip + 'admin/sys-file/upload/waterPress',
							filePath: video.tempFilePath,
							name: 'file',
							method: "POST",
							formData: obj,
							header: {
								'Authorization': 'Bearer ' + uni.getStorageSync('token'),
							},
							success: (res) => {
								uni.hideLoading();
								if (JSON.parse(res.data).code == 20000) {
									item.videoList = item.videoList.concat({videoUrl: video.tempFilePath, attachment: JSON.parse(res.data).data.id, stepId: item.stepId});
									this.zdhjcStandardPro.postDetails.push({
										attachment: JSON.parse(res.data).data.id,
										originalAttachment: JSON.parse(res.data).data.original,
										fileType: obj.fileType,
										stepId: obj.stepId,
									})
									console.log(this.zdhjcStandardPro);
								} else {
									uni.showToast({
										title: '文件上传失败',
										icon: 'none'
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title: JSON.stringify(JSON.parse(res.data).message),
									icon: 'none',
									duration: 1000
								})
							},
						})
						// }
					}
				})
			},
			// previewImage: function(e) { //预览图片
			// 	this.previewImageAll = []
			// 	console.log(e.target.dataset.src)
			// 	this.previewImageAll.push(e.target.dataset.src)
			// 	uni.previewImage({
			// 		current: e.target.dataset.src,
			// 		loop: false,
			// 		urls: this.previewImageAll
			// 	})
			// },
			showImgsf(item){
				this.imgUrl = '';
				this.$refs.imgpopup.open();
				uni.getImageInfo({
					src: ipConfig.ip + 'admin/sys-file/getFileById?id='+item.attachmentId,
					success: (image)=> {
						this.imgWidth = image.width;
						this.imgHeight = image.height;
						let imgInfo = this.calculate(this.screenWidth,this.screenHeight, image.width, image.height);
						this.imgH = imgInfo.ph+'px';
						this.imgW = imgInfo.pw+'px';
						this.imgUrl = item.imgUrl;
						// this.context = uni.createCanvasContext('previewCanvas');
						// this.context.drawImage(item.imgUrl, imgInfo.px, imgInfo.py, imgInfo.pw, imgInfo.ph);
						// this.context.draw();
					}
				});
			},
			//预览图片
			showImg(item){
				this.imgUrl = '';
				this.$refs.imgpopup.open();
				this.hideVideo = true
					this.standardSteps.forEach((obj,index) => {
						if(item.stepId == obj.stepId){
							uni.getImageInfo({
									src: ipConfig.ip + 'admin/sys-file/getFileById?id='+item.attachment,
									success: (e) => {
										let imgInfo = this.calculate(this.screenWidth,this.screenHeight-50,e.width,e.height);
										this.imgH = imgInfo.ph+'px';
										this.imgW = imgInfo.pw+'px';
										this.imgUrl = item.imgUrl;
										// this.context = uni.createCanvasContext('previewCanvas');
										// this.context.drawImage(item.imgUrl, imgInfo.px, imgInfo.py, imgInfo.pw, imgInfo.ph);
										// this.context.draw();
									}
							});
						}
					})
			},
			calculate(w, h, pw, ph) {	//canvas图片自适应居中
				console.log(w,h,pw,ph)
				let px = 0;
				let py = 0;
				if(pw < w && ph < h){
						px = 0.5 * w - 0.5 * pw;
						py = 0.5 * h - 0.5 * ph;
				}else if (ph / pw > h / w) {
						let uu = ph;
						ph = h
						pw = pw * h / uu
						px = 0.5 * w - 0.5 * pw;
				} else {
						let uu = pw;
						pw = w;
						ph = ph * pw / uu
						py = 0.5 * h - 0.5 * ph;
				}
				return {px, py, pw, ph}
			},
			closeImg(){
				this.hideVideo = false
				this.$refs.imgpopup.close();
			},
			start(e){
				// this.clientX=e.changedTouches[0].clientX;
				// this.clientY=e.changedTouches[0].clientY;
			},
			end(e){
				// const subX=e.changedTouches[0].clientX-this.clientX;
				// const subY=e.changedTouches[0].clientY - this.clientY;
				
				// if(subX>80){
				// 	if(this.imgIndex <= this.previewImageAll.length-1 && this.imgIndex > 0){
				// 		this.imgIndex--
				// 	}else{
				// 		this.imgIndex = this.previewImageAll.length - 1
				// 	}
				// 	this.imgUrl = this.previewImageAll[this.imgIndex]
				// }else if(subX<-80){
				// 	if(this.imgIndex == this.previewImageAll.length -1){
				// 		this.imgIndex = 0
				// 	}else{
				// 		this.imgIndex++
				// 	}
				// 	this.imgUrl = this.previewImageAll[this.imgIndex]
				// }
			},
			delectImage(index, imgIndex, attachment) { //删除图片
				// this.videoStyle = false
				uni.showModal({
					title: "提示",
					content: "是否要删除该图片",
					success: (res) => {
						if (res.confirm) {
							this.standardSteps.forEach((obj, i) => {
								if (index == i) {
									this.previewImageAll.forEach(previewImgIndex => {
										if (imgIndex == previewImgIndex) {
											this.previewImageAll.splice(imgIndex, 1)
										}
									})
									obj.imageList.forEach((objList, imageListIndex) => {
										if (imgIndex == imageListIndex) {
											obj.imageList.splice(imageListIndex, 1)
											this.zdhjcStandardPro.postDetails.forEach((item,i)=>{
												if(item.attachment == attachment){
													this.zdhjcStandardPro.postDetails.splice(i, 1) 
												};
											})
										}
									})
								}
							})
							console.log(this.zdhjcStandardPro.postDetails);
						}
					}
				})
			},
			delectVideo(index, videoIndex, attachment) { //删除视频
				uni.showModal({
					title: "提示",
					content: "是否要删除此视频",
					success: (res) => {
						if (res.confirm) {
							this.standardSteps.forEach((obj, i) => {
								if (index == i) {
									obj.videoList.filter((objList, videoListIndex) => {
										if (videoIndex == videoListIndex) {
											obj.videoList.splice(videoListIndex, 1)
											this.zdhjcStandardPro.postDetails.forEach((item,i)=>{
												if(item.attachment == attachment){
													this.zdhjcStandardPro.postDetails.splice(i, 1) 
												};
											})
										}
									})
								}
							})
							console.log(this.zdhjcStandardPro.postDetails);
						}
					}
				})
			},
			videobtn() { //预览视频
				this.videoStyle = !this.videoStyle
			},
			fileAll(UpdateOrAdd) {
				// let flag = 0;
				// if(this.attachmentFile.length > 0){
				// 	this.attachmentFile.forEach((obj, index) => {
				// 		uni.uploadFile({
				// 			url: ipConfig.ip + 'admin/sys-file/upload/waterPress',
				// 			filePath: obj.filePath,
				// 			name: 'file',
				// 			method: "POST",
				// 			formData: obj,
				// 			header: {
				// 				'Authorization': 'Bearer ' + uni.getStorageSync('token'),
				// 			},
				// 			success: (res) => {
				// 				flag++;
				// 				if (JSON.parse(res.data).code == 20000) {
				// 					this.zdhjcStandardPro.postDetails.push({
				// 						attachment: JSON.parse(res.data).data.id,
				// 						originalAttachment: JSON.parse(res.data).data.original,
				// 						fileType: obj.fileType,
				// 						stepId: obj.stepId,
				// 					})
				// 					console.log(flag);
				// 					if (flag == this.attachmentFile.length) {
				// 						if (UpdateOrAdd == 0) {
				// 							console.log(this.zdhjcStandardPro.postDetails)
				// 							buildSave(this.zdhjcStandardPro).then(res => {
				// 								if (res.code == 20000) {
				// 									uni.showToast({
				// 										title: res.message
				// 									})
				// 									setTimeout(()=>{
				// 										uni.navigateBack({ delta: 1 });
				// 									},1000)
				// 								}
				// 							})
				// 						} else {
				// 							console.log(this.zdhjcStandardPro.postDetails)
				// 							updateBuild(this.zdhjcStandardPro).then(res => {
				// 								if (res.code == 20000) {
				// 									uni.showToast({
				// 										title: res.message
				// 									})
				// 									uni.removeStorageSync('InfoListData')
				// 									setTimeout(()=>{
				// 										uni.navigateBack({ delta: 1 });
				// 									},1000)
				// 								}
				// 							})
				// 						}
				// 					}
				// 				} else {
				// 					uni.showToast({
				// 						title: '文件上传失败',
				// 						icon: 'none'
				// 					})
				// 				}
				// 			},
				// 			fail: (res) => {
				// 				uni.showToast({
				// 					title: JSON.stringify(JSON.parse(res.data).message),
				// 					icon: 'none',
				// 					duration: 1000
				// 				})
				// 			},
				// 		})
				// 	})
				// }else{
					
					if (UpdateOrAdd == 0) {
						buildSave({data: this.zdhjcStandardPro, submitFlag: this.submitFlag}).then(res => {
							if (res.code == 20000) {
								uni.showToast({
									title: res.message
								})
								setTimeout(()=>{
									uni.navigateBack({ delta: 1 });
								},1000)
							}
						})
					} else {
						updateBuild({data: this.zdhjcStandardPro, submitFlag: this.submitFlag}).then(res => {
							if (res.code == 20000) {
								uni.showToast({
									title: res.message
								})
								uni.removeStorageSync('InfoListData')
								setTimeout(()=>{
									uni.navigateBack({ delta: 1 });
								},1000)
							}
						})
					}
				// }
			},
			buildSaveBtn() { //新增
				this.gopay = false;
				this.submitFlag = 1;
				setTimeout(() => {
					this.gopay = true;
				}, 3000)
				if (!this.zdhjcStandardPro.gaugingPoint) {
					uni.showToast({
						title: '测点名称不能为空',
						icon: 'none'
					})
				} else {
					if (this.showEquipment == true) {
						// if (!this.zdhjcStandardPro.equipmentId) {
						// 	uni.showToast({
						// 		title: '请输入设备id',
						// 		icon: 'none'
						// 	})
						// } else if (!this.zdhjcStandardPro.equipmentName) {
						// 	uni.showToast({
						// 		title: '请输入设备名称',
						// 		icon: 'none'
						// 	})
						// } else 
						if (!this.zdhjcStandardPro.equipmentType) {
							uni.showToast({
								title: '请选择设备类型',
								icon: 'none'
							})
						} else {
							if (this.standardSteps.length == 0) {
								uni.showToast({
									title: '请选择规范模板',
									icon: 'none'
								})
							} else {
								let imgVideoLength = this.standardSteps.every(obj => {
									return obj.imageList.length > 0 || obj.videoList.length > 0
								})
								if (imgVideoLength == false) {
									uni.showToast({
										title: '请将模板图片上传完整',
										icon: 'none'
									})
								} else {
									if (this.InfoListData) {
										this.zdhjcStandardPro.id = this.InfoListData.id
										this.fileAll(1);
									} else {
										this.fileAll(0)
									}
								}
							}
						}
					} else {
						if (this.standardSteps.length == 0) {
							uni.showToast({
								title: '请选择规范模板',
								icon: 'none'
							})
						} else if (!this.zdhjcStandardPro.equipmentType) {
							uni.showToast({
								title: '请选择设备类型',
								icon: 'none'
							})
						} else {
							let imgVideoLength = this.standardSteps.every(obj => {
								return obj.imageList.length > 0 || obj.videoList.length > 0
							})
							if (imgVideoLength == false) {
								uni.showToast({
									title: '请上传步骤文件',
									icon: 'none'
								})
							} else {
								if (this.InfoListData) {
									this.zdhjcStandardPro.id = this.InfoListData.id
									this.fileAll(1);
								} else {
									this.fileAll(0)
								}
							}
						}
					}
				}
			},
			temporarySave() {
				console.log(this.zdhjcStandardPro);
				this.submitFlag = 0;
				if (!this.zdhjcStandardPro.gaugingPoint) {
					uni.showToast({
						title: '测点名称不能为空',
						icon: 'none'
					})
				}else if (this.standardSteps.length == 0) {
					uni.showToast({
						title: '请选择规范模板',
						icon: 'none'
					})
				}else{
					if (this.InfoListData) {
						this.zdhjcStandardPro.id = this.InfoListData.id
						this.fileAll(1);
					} else {
						this.fileAll(0)
					}
				}
			},
			delclose() {
				this.$refs.delpopup.close()
			},
			delBuildBtn() {
				this.$refs.delpopup.open()
			},
			delconfirm() {
				delBuild(this.InfoListData.id).then(res => {
					if (res.code == 20000) {
						uni.showToast({
							title: '删除成功'
						})
						this.$refs.delpopup.close()
						setTimeout(()=>{
							uni.navigateBack({ delta: 1 });
						},1000)
					} else {
						uni.showToast({
							title: res.message
						})
					}
				})
			},
		},
		watch: {
			'nowImg.path': {
				deep: true, //深度监听对象改变
				handler(n) {
					if(n){
						let content = '';
						let obj = {
							path: 'app',
							fileType: 0,
							stepId: this.nowImg.item.stepId,
							position: this.waterInfo.position,
							timeFlag: this.waterInfo.timeFlag == 1 ? true : false,
						}
						if(this.waterInfo.pointFlag == 1) content += `测点：${this.zdhjcStandardPro.gaugingPoint}|`
						if(this.waterInfo.addressFlag == 1) content += `地址：${this.zdhjcStandardPro.postAddr}|`
						if(this.waterInfo.laloFlag == 1) content += `经纬度：${this.zdhjcStandardPro.longitude}, ${this.zdhjcStandardPro.latitude}|`
						obj.content = content.substr(0, content.length-1);
						console.log(obj)
						
						uni.uploadFile({
							url: ipConfig.ip + 'admin/sys-file/upload/waterPress',
							filePath: n,
							name: 'file',
							method: "POST",
							formData: obj,
							header: {
								'Authorization': 'Bearer ' + uni.getStorageSync('token'),
							},
							success: (res) => {
								uni.hideLoading();
								if (JSON.parse(res.data).code == 20000) {
									this.nowImg.item.imageList = this.nowImg.item.imageList.concat({
										imgUrl: n, 
										attachment: JSON.parse(res.data).data.id, 
										stepId: obj.stepId,
									});
									this.zdhjcStandardPro.postDetails.push({
										attachment: JSON.parse(res.data).data.id,
										originalAttachment: JSON.parse(res.data).data.original,
										fileType: obj.fileType,
										stepId: obj.stepId,
									})
									this.nowImg.path = '';
									console.log(this.zdhjcStandardPro);
								} else {
									uni.showToast({
										title: '文件上传失败',
										icon: 'none'
									})
								}
							},
							fail: (res) => {
								uni.showToast({
									title: JSON.stringify(JSON.parse(res.data).message),
									icon: 'none',
									duration: 1000
								})
							},
						})
					}
				}
			}	
		}
	}
</script>

<style lang="less">
	.form-list {
		padding: 0 3%;
	}
	uni-input {
		height: 80rpx;
		line-height: 80rpx;
		text-align: right;
		font-size: 28rpx;
		min-width: 60%;
		max-width: 80%;
	}
	.photograph {
		padding: 20rpx 3%;
		.photo-list {
			width: 100%;
			margin-top: 20rpx;
			overflow: hidden;
			.demonstration {
				>view {
					position: absolute;
					left: 0;
					top: 0;
					z-index: 9;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.4);
					color: #f2f2f2;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				image {
					width: 48%;
					height: 100% !important;
					vertical-align: bottom;
					margin-bottom: 20rpx;
					float: left;
				}
			}
			.image-view {
				float: left;
				width: 48%;
				height: 270rpx;
				position: relative;
				margin: 0 0 20rpx 0;
				border: 2rpx solid #ddd;
				box-sizing: border-box;
				image {
					width: 100%;
					height: 220rpx;
					vertical-align: bottom;
					margin-bottom: 0;
				}
				// video{width: 100%;height: 100%;vertical-align: bottom;margin-bottom: 0;}
				/deep/ uni-video {
					width: 100%;
					height: 200rpx;
				}
				/deep/ .del-btn {
					position: absolute;
					bottom: 0;
					width: 100%;
				}
			}
			.image-view {
				margin-right: 4%;
			}
			.image-view:nth-child(2n) {
				margin-right: 0;
			}
		}
	}

	.screen-popup {
		background-color: #fff;
		min-height: 600rpx;
		max-height: 1200rpx;
		.screen-popup-title {
			background-color: #f2f2f2;
			height: 80rpx;
			line-height: 80rpx;
			color: #666;
			>view {
				text {
					display: block;
					padding: 0 40rpx;
					line-height: 80rpx;
				}
				text:last-child {
					background-color: #09AAE9;
					color: #fff;
				}
			}
		}
	}

	.screen-popup-body {
		/deep/ .uni-searchbar__box {
			border-color: #eee
		}
		.uni-list {
			max-height: 980rpx;
			.overflow-h{
				max-height: 980rpx;
				overflow-y: scroll;
			}
			uni-label {
				padding: 20rpx 3%;
			}
		}
	}

	uni-button:after {
		border: none !important;
	}
	.construction-footer {
		width: -webkit-fill-available;
		height: 80rpx;
		// position: fixed;
		// bottom: 0;
		// left: 0;
		// z-index: 999;
		// /deep/ .uni-cover-view{display: flex;}
		button {
			font-size: 28rpx;
			color: #fff;
			width: -webkit-fill-available;
			line-height: 80rpx;
			border-radius: 0;
			background-color: #09AAE9;
			border-right: 1px solid #fff;
		}
		button:first-child {
			background-color: #fa5959;
		}
		button:last-child{
			border-right: none;
		}
	}

	.mt--5 {
		margin-top: -10rpx;
	}
	.min-height-40 {
		min-height: 80rpx;
	}
	.form-list /deep/ .uni-easyinput__content {
		border: none;
	}
	.uni-list-picker /deep/ .uni-input {
		text-align: right;
		padding: 0;
		height: 80rpx;
		line-height: 80rpx;
	}
	.locationstyle {
		height: 40px;
		display: grid;
		padding: 5px 0;
	}
	.popup  /deep/ .uni-popup__wrapper-box{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 90%;
		>.preview-cancas{
			width: 100%;
			height: 100%;
		}
	}
	.video2{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
		z-index: 999;
	}
	.video2 /deep/ .uni-video-container{height: 260px;top: 50%;left: 0;transform: translateY(-50%);}
</style>
